<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<div id="app">
<!--   <StudentComponent></StudentComponent>-->
<!--    <student-component></student-component>-->
<!--    <Student></Student>-->
    <student></student>
</div>

<script>

    let student = {
        template: '<div>学生组件</div>'
    }

    /*
    * components: {
            "student":student
       }
    *
    *  组件名:组件对象
    *   在注册一个组件的时候，我们始终需要给它一个名字,定义组件名的方式有两种：
    *    1.使用 kebab-case   短横线分隔命名   my-component-name
    *         必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>
    *    2.使用 PascalCase  大驼峰命名  MyComponentName
    *         当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。
    *         也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。
    *          注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的
    *    3. 组件的名字如果只有一个单词 且时全小写    引用组件时 可以使用全小写 也可以将单词的首字母大写
    * */
    let vm = new Vue({
        el: '#app',
        data: {},
        // template: `
        //       <div>
        //           <student-component></student-component>
        //           <StudentComponent></StudentComponent>
        //       </div>
        // ` ,
        methods: {},
        components: {
            // "StudentComponent":student
            // "student-component":student
            // "student":student
            student
        }
    })
</script>
</body>
</html>